import React, {CSSProperties, useMemo, useState} from 'react'
import {View} from '@tarojs/components'
import './Loading.scss'

interface Props {
  color?: string
  showLoading?: boolean
  show?: boolean
}

export const useLoading = () => {
  const [show, setShow] = useState(false)
  function showLoading () {
    setShow(true)
  }
  function hideLoading () {
    setShow(false)
  }
  return {
    show, showLoading, hideLoading
  }
}

const Loading: React.FC<Props> = ({color = '#5b4dbc', showLoading = false, show = true}) => {

  const styled = useMemo((): CSSProperties => {
    return {
      color: color,
      display: show ? 'flex' : 'none'
    }
  }, [color, show])

  return <View className={`loading ${showLoading ? 'show_loading' : ''}`}
    style={styled}
  >
    <View className='loading_item' />
    <View className='loading_item' />
  </View>
}

export default Loading
